﻿<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0"/>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="../css/rain.css" type="text/css" media="all"/>
<style type="text/css">
.body{width:320px;}
.itemwrap{height:2400px;}
.slideitem{height: 568px;}
.img1,.img2{margin-top: -800px;}
</style>
</head>
<body class="body">
<div class="mainwrap posr oh fullh">
	<div class="j_itemwrap itemwrap">
		<div class="j_item-1 item-1 slideitem posr tac oh">
			<img src="http://ww1.sinaimg.cn/bmiddle/005vSBqytw1em08yevgxvj306k0aajs6.jpg" width="100%" class="j_img1 img1" />
		</div>
		<div class="j_item-2 item-2 slideitem posr tac oh">
			<img src="http://ww1.sinaimg.cn/bmiddle/005vSBqytw1em08yhd3u6j306k08pjsc.jpg" width="100%" class="j_img2 img1" />
		</div>
	</div>
</div>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript">
(function ($) {
window.screenslide =function(obj){
    this.obj = obj;
    $.extend(this,{
        selector: '.j_itemwrap',
        itemSelectror: '.slideitem',
        firstslide: function(){},
        beforeslide: function(){},
        upCallback: function(){},
        downCallback: function(){}
    }, this.obj || {});
    this.init();
};

screenslide.prototype = {
    index: 0,
    slideheight: window.screen.height,
    init: function(){
        $(document).on('touchmove',function(e){
            e.preventDefault();
        });
        this.firstslide();
        this.registerEvents();
    },
    getBox: function(){ 
        return $(this.selector);
    },
    getMax: function(){
        return $(this.itemSelectror).length;
    },
    getIndex: function(){
        return this.index;
    },
    goNext: function(){
        var _this = this;
        var box = _this.getBox();
        if(_this.index < _this.getMax()-1){
            _this.index++;
            _this.beforeslide();
            box.velocity({"margin-top":"-"+_this.index * _this.slideheight+"px"},function(){
                _this.upCallback();
            });
        }
    },
    registerEvents: function(){
        var _this = this;
        var box = _this.getBox();
        touch.on(_this.selector, "swipeup",function(e){
            if(_this.index < _this.getMax()-1){
                _this.index++;
                _this.beforeslide();
                box.velocity({"margin-top":"-"+_this.index * _this.slideheight+"px"},function(){
                    _this.upCallback();
                });
            }
        });
        touch.on(_this.selector, "swipedown",function(e){
            if(_this.index > 0){
                _this.index--;
                _this.beforeslide();
                box.velocity({"margin-top":"-"+_this.index * _this.slideheight+"px"},function(){
                    _this.downCallback();
                });
            }
        });
    }
}
})(window.Zepto || window.jQuery); 
var screenslide = new screenslide({
	selector: '.j_itemwrap',
	itemSelectror: '.slideitem',
	firstslide:function(){
		$(".j_img1").velocity({"margin-top":'0px'});
	},
	beforeslide: function(){},
	upCallback: function(){
		var i = screenslide.getIndex();
		if(i===1){
			$(".j_img1").velocity({"margin-top":'-800px'});
			$(".j_img2").velocity({"margin-top":'0px'});
		}
	},
	downCallback: function(){
		var i = screenslide.getIndex();
		if(i===0){
			$(".j_img1").velocity({"margin-top":'0px'});
			$(".j_img2").velocity({"margin-top":'-800px'});
		}
		if(i===1){
			$(".j_img1").velocity({"margin-top":'-800px'});
			$(".j_img2").velocity({"margin-top":'0px'});
		}
	}
}); 
</script>
</body>
</html>
